<!-- 这是首页 -->
<template>
  <div>
    <van-nav-bar title="我的发布" left-arrow @click-left="()=>{this.$router.back()}" />
      <van-empty description="还没有人发布内容,快来发布吧~" v-if="list.length== 0"></van-empty>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list :finished="page == total" finished-text="没有更多了" @load="onLoad" style="padding-bottom: 50px;">
        <!--        圈子显示部分-->
        <div class="x" style="margin:25px 15px ;" v-for="(item, index) in list" :key="index">
          <!-- <img :src="item.avatar" alt="Avatar" class="avatar" /> -->
          <!--          头像-->
          <van-image radius="4" fit="cover" width="50" height="50" :src="item.avatar" />
          <div class="y flex" style="margin-left: 10px;">
            <!--            昵称-->
            <div class="x">
               <div class="username">{{ item.nickname }}</div>
               <van-button size="mini"  @click="deleteItem(item.id)">删除</van-button>
            </div>
            <!--            文案-->
            <div class="content-text">{{ item.content }}</div>
            <!--            图片显示部分-->
            <van-grid :column-num="3" style="margin:8px 0px" v-if="item.images.length > 0" :gutter="1">
              <van-image v-for="img, index in item.images" :key="index" style="margin: 1px;"
                         @click="ImagePreview(item.images, index)" radius="4" width="100" height="100" :src="img"
                         fit="cover" />
            </van-grid>
            <div class="x" style="align-items: center;">
              <!--              时间-->
              <div class="timestamp flex">{{ parse(item.time) }}</div>
                           <!-- 点赞部分 -->
                           <van-popover placement="left" v-model="item.showPopover" theme="dark" trigger="click"
                                        :actions="actions">
                             <template #reference>
                               <van-icon name="ellipsis" />
                             </template>
                             <div class="x common">
                               <div class="x " @click="like(item)" style="margin-right: 20px;align-items: center;">
                                 <van-icon name="like-o" size="20" v-if="item.status !=1" />
                                 <van-icon name="like" size="20" v-if="item.status ==1" color="#DF0029"/>
                                 <div>点赞</div>
                               </div>
                               <div class="x" style="align-items: center;"><van-icon name="comment-o" size="20" />
                                 <div>评论</div>
                               </div>

                             </div>
                           </van-popover>

            </div>

          </div>
        </div>
      </van-list>
    </van-pull-refresh>

  </div>
</template>

<script>
// 网络请求
import axios from '../utils/request'
// 用来显示朋友圈时间的转换
import {weChatTimeFormat} from '@/utils/time.js'
// 显示加载框等
import { Toast } from 'vant';
// 预览图片组件，vantui的
import { ImagePreview } from 'vant';
export default {

  data() {
    return {
      showPopover: false,
      list: [],//要显示的圈子数据
      page: 1,
      refreshing: false,
      total: 1//表示总页码数
    };
  },
  mounted() {//生命周期函数，刷新页面会调用
    this.getList()
  },
  methods: {
      //删除数据
      deleteItem(id){
      //传给后台的参数
      let data = {
        id:id
      }
      axios.post("/circle/delete",data).then(response => {

          Toast.success(response.data.msg);
          this.onRefresh()//删除成功后刷新列表
      
      })
    },
    like(item){
      let data = {
        circleId:item.id,
        status:1
      }
      axios.post("/circle/like",data).then(response => {

          item.status = 1
          Toast.success(response.data.msg);

        
      })
    },
    parse(time){
      return  weChatTimeFormat(time)
    },
    //预览图片 list是要显示的图片列表 index是位置，表示进去后显示的是第几张
    ImagePreview(list, index) {
      ImagePreview({
        images: list,
        startPosition: index,
      });
    },
    goPublic() {
      this.$router.push('/public')
    },
    //下拉刷新触发
    onRefresh() {
      this.page = 1
      this.list = []
      this.getList();
    },
    //滑动到底部触发
    onLoad() {
      if (this.page == this.total) {
        return
      }
      this.page++ //请求下一页的数据
      this.getList();
    },
    getList() {

      axios.get("/circle/mylist?page=" + this.page).then(response => {
        this.refreshing = false
       
          for (const item of response.data.data.list) {//处理图片数据，因为存入数据库的数据是字符串

            if (!item.images) {
              item.images = []
              continue
            }
            // item.status = 0
            item.images = JSON.parse(item.images)//字符串转对象
          }
          this.list = [...this.list, ...response.data.data.list]//获取列表 合并两个数组
          this.total = response.data.data.total
          // Toast.success(response.data.msg);

        
      })
    }

  }
}
</script>

<style>
.flex {
  flex: 1
}

.common {
  padding: 12px 24px;
  align-items: center;
  font-size: 14px;
}

.username {
  color: #194e83;
  font-weight: 550;
  font-size: 17px;
  flex:1
}

.content-text {
  color: #000000;
  font-size: 15px;
  margin-top: 5px;
  font-family: '微软雅黑', '宋体';
}

.timestamp {
  color: #999999;
  font-size: 11px;

}

.y {
  display: flex;
  flex-direction: column;
}

.x {
  display: flex;
  flex-direction: row;
}

.avatar {
  width: 80px;
  height: 80px;
}</style>